<template>
	<view class="panel-role tab-panel" v-if="show">
		
		<view class="role-tab-hd">
			<view :class="['item',role_tab == 'equip' ? 'active' : '']" @click="role_tab = 'equip'">装备</view>
			<view :class="['item',role_tab == 'attr' ? 'active' : '']" @click="role_tab = 'attr'">属性</view>
		</view>
		<view class="role-tab-bd">
			
			<view class="equip-panel" v-show="role_tab == 'equip'">
				<image class="face" src="../../static/assets/warrior.png"></image>
				<view :class="['equip-box',`equip-${index+1}`]" v-for="(item,index) in 8" :key="index">
					<block v-for="(equip,equipIndex) in player.equip" :key="equip.uuid">
						<comp-item :itemDataVolume="equip" v-if="equip.region == index" :operate="['takeoff','lock']"></comp-item>
					</block>
				</view>
			</view>
			
			
			<view class="player-attrs-panel" v-show="role_tab == 'attr'">
				<view class="bd">
					<view class="item">
						<view class="attr">
							<view class="label">等级</view>
							<view class="value">{{player.lv}}</view>
						</view>
						<view class="attr">
							<view class="label">经验</view><view class="value">{{player.attr.exp}}</view>
						</view>
					</view>
			
					<view class="item">
						<view class="attr">
							<view class="label">血量</view><view class="value">{{player.attr.hp}}</view>
						</view>
						<view class="attr">
							<view class="label">回复</view><view class="value">{{player.attr.recover}}</view>
						</view>
					</view>
					<view class="item">
						<view class="attr">
							<view class="label">攻击</view><view class="value">{{player.attr.min_atk}}-{{player.attr.max_atk}}</view>
						</view>
						<view class="attr">
							<view class="label">防御</view><view class="value">{{player.attr.min_def}}-{{player.attr.max_def}}</view>
						</view>
					</view>
					
			
					<view class="item">
						<view class="attr">
							<view class="label">暴击</view><view class="value">{{player.attr.crit}}</view>
						</view>
						<view class="attr">
							<view class="label">爆伤</view><view class="value">{{player.attr.crit_dmg}}</view>
						</view>
					</view>
					<view class="item">
						<view class="attr">
							<view class="label">增伤</view><view class="value">{{player.attr.add_dmg}}</view>
						</view>
						<view class="attr">
							<view class="label">减伤</view><view class="value">{{Math.min($config.reduce_dmg_limit,player.attr.reduce_dmg)}}</view>
						</view>
					</view>
					<view class="item">
						<view class="attr">
							<view class="label">攻速</view><view class="value">{{player.attr.speed}}</view>
						</view>
						<view class="attr">
							<view class="label">幸运</view><view class="value">{{player.attr.luck}}</view>
						</view>
					</view>
					
				</view>
			
			</view>
			
		</view>
		

	
		<view class="bag-tab" @click.stop>
			<view :class="['item',current_panel_tab == item.type ? 'active' : '']" @click="current_panel_tab = item.type" v-for="(item,index) in panel_tab">{{item.name}}</view>
		</view>

		<view class="bag" v-show="current_panel_tab == 'bag'">
			<view class="item" v-for="(item,index) in player.bag_count" :key="index">
				<block v-if="player.bag[index]">
					<comp-item :itemDataVolume="player.bag[index]" comparison :operate="['puton','retrieve','lock']"></comp-item>
				</block>
			</view>
		</view>


		<view class="skill" v-show="current_panel_tab == 'skill'">
			<view class="item">
				<image class="ico" src="../../static/assets/skills/1/ico.png"></image>
				<view class="info">
					<view class="name">普通攻击 Lv.1</view>
					<view class="des">普通技能，对单个目标造成<text style="color:var(--color-green)">100%</text>攻击的伤害</view>
				</view>
			</view>
		</view>

		
		
	</view>
</template>

<script>
	
	import compItem from '../comp-item/comp-item.vue';
	
	import { mapState } from "vuex";
	export default {
		name:"panel-role",
		components:{
			compItem
		},
		computed : {
			...mapState(['player']),
		},
		data() {
			return {
				show : false,
				bag_show : false,
				itemDataVolume : null,
				show_more : false,
				role_tab : 'equip',
				panel_tab : [
					{name : '背包',type : 'bag'},
					{name : '技能',type : 'skill'}
				],
				current_panel_tab : 'bag'
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.show = true
			})
		},
		methods : {
			changeType(type){
				console.log(type)
				this.current_panel_tab = type
			}
		}
	}
</script>

<style lang="scss">
	.panel-role{
		display: flex;
		flex-direction: column;
		
		.role-tab-hd{
			display: flex;
			justify-content: center;
			align-items: center;
			height:50px;
			border-bottom: 1px solid #000;
			gap: 10px;
			.item{
				height:30px;
				width:100px;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 4px;
				cursor: pointer;
				&.active{
					background-color: $game-color-2;
					border: 1px solid #000;
				}
			}
		}
		.role-tab-bd{
			height:300px;
			border-bottom: 1px solid #000;
		}
		
		
		.equip-panel{

			.face{
				width:260px;
				height:260px;
				-webkit-filter: drop-shadow(10px 10px 0 #21252b);
				position: absolute;
				left:50%;
				margin-left:-130px;
			}
			
			.equip-box{
				$boxSize:50px;
				$boxGap:20px;
				background-color: #21252b;
				width:$boxSize;
				height:$boxSize;
				border: 1px solid #000;
				flex-shrink: 0;
				border-radius: 4px;
				margin-bottom:20px;
				

				
				&.equip-1{ //武器
					margin-top:20px;
					margin-left:20px;
				}
				&.equip-2{ //衣服
					margin-left:20px;
				}
				&.equip-3{ //手镯
					margin-left:20px;
				}
				
				&.equip-4{ //戒指
					margin-left:20px;
				}
				
				&.equip-5{ //头盔
					margin-left: auto;
					margin-top:-280px;
					margin-right:20px;
				}
				
				&.equip-6{ //项链
					margin-left: auto;
					margin-right:20px;
				}
				
				&.equip-7{ //腰带
					margin-left: auto;
					margin-right:20px;
				}
				
				&.equip-8{ //鞋子
					margin-left: auto;
					margin-right:20px;
				}
			}
		}
		
		
		.exp{
			overflow: hidden;
			border-bottom: 1px solid #000;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			.text{
				font-size:12px;
				transform:scale(0.8);
				color:#abb2bf;
				transform-origin:bottom center;
				position: absolute;
				bottom:1px
			}
		}
		
		
		.player-attrs-panel{
			$attr-height : 50px;
			background-color: $game-color-2;
			.hd{
				display: flex;
				.item{
					flex:1;
					height:$attr-height;
					display: flex;
					justify-content: center;
					align-items: center;
					&:first-child{
						border-right: 1px solid #000;
						box-sizing: border-box;
					}
				}
			}
			.bd{
				.item{
					height:$attr-height;
					border-bottom: 1px solid #000;
					box-sizing: border-box;
					display: flex;
					.attr{
						flex:1;
						display: flex;
						&:first-child{
							border-right: 1px solid #000;
							height::$attr-height;
						}
						.label{
							width:80px;
							height::$attr-height;
							border-right: 1px solid #000;
							display: flex;
							justify-content: center;
							align-items: center;
							.other{
								align-self: flex-end;
							}
						}
						.value{
							display: flex;
							align-items: center;
							padding-left:10px;
						}
						
					}
				}
			}
		}
		
		.bag-tab{
			display: flex;
			height:30px;
			background-color: $game-color-2;
			border-bottom: 1px solid #000;
			align-items: center;
			.item{
				display: flex;
				width:80px;
				border-right: 1px solid #000;
				background-color: $game-color-2;
				height:30px;
				border-bottom: 1px solid #000;
				justify-content: center;
				align-items: center;
				&.active{
					background-color: $game-color-1;
					border-bottom: none;
					line-height: 31px;
				}
				
				
			}
		}
		
		.bag{
			display: grid;
			gap:10px;
			grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
			padding:10px;
			flex:1;
			align-items: flex-start;
			align-content: flex-start;
			overflow: overlay;
			.item{
				aspect-ratio: 1 / 1;
				background-color: $game-color-2;
				border: 1px solid #000;
				border-radius: 4px;
			}
		}
		
		.skill{
			flex:1;
			overflow: overlay;
			padding:20px;
			gap:20px;
			display: flex;
			flex-direction: column;
			.item{
				height:70px;
				background-color: $game-color-2;
				border: 1px solid #000;
				flex-shrink: 0;
				border-radius: 4px;
				display: flex;
				align-items: center;
				.ico{
					width:50px;
					height:50px;
					margin-left:5px;
					margin-right:5px;
				}
				.info{
					.name{
						font-size:16px;
						margin-bottom:5px;
						color:var(--color-yellow)
					}
				}
			}
		}
		
		
	}
</style>